import {PAObj, serverName} from '../../common/utils/PAObjClass.js';
const REQUEST_GET_DEVICE = 1;
const REQUEST_CONNECT = 2;
const REQUEST_SEND_MSG = 3;

const REQUEST_SUBSCRIBE = 4;
const REQUEST_UNSUBSCRIBE = 5;
var myPAObj = new PAObj(serverName.server);

export default {
    data: {
        canvas:{
            width:350,
            height:350,
        },
        ctx:undefined,
        raf:undefined,
        color1:0,
        color2:0,
        t1:1,
        t2:2,
        running:false,
        ball:{
            x:100,
            y:100,
            vx:10,
            vy:3,
            r:20,
            color:"#8A2BE2",//紫色小球
            draw:function(ctx)
            {
                ctx.save();
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
                ctx.fillStyle=this.color;
                ctx.fill();
                ctx.restore();
            }
        },

        start:false,
        requestId:0,
        isConnect:false,
        isLocal:true,
        isDisappear:false,
    },
    onInit() {
        console.info("onInit")
    },
    onShow() {

    },
    onReady() {
        console.info("onReady")
        this.subscribe();
    },
    onDestroy() {
        this.unsubscribe();
    },

    onStart() {
        this.start = true;
        if(this.isConnect) {
            this.sendDataToOther({method:"onStart"});
        }
//        this.isConnect = true;
        setTimeout(()=>{
            let getCanvas = this.$refs.ballCanvas;
            this.ctx = getCanvas.getContext("2d");
            this.initCanvas();
        }, 500)
    },
    initCanvas() {
        if(!this.isLocal) {
            this.isDisappear = true;
        }
        let ctx = this.ctx;
        ctx.save();
        ctx.strokeStyle=this.getColor();
        ctx.lineWidth=10;
        ctx.strokeRect(0,0,this.canvas.width,this.canvas.height);
        ctx.restore();
        if(!this.running)//没有小球
        {
            this.raf=setInterval(()=>{
                this.draw();
            },30);
            this.running=true;
        }
    },
    clear() {
        let ctx = this.ctx;
        ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.fillRect(20,20,this.canvas.width-10,this.canvas.height-10);
    },
    //产生颜色
    getColor(){
        this.color1+=(this.t1==1)?2:-2;
        this.color2+=(this.t2==1)?1:-1;
        this.t1*=(this.color1>=255||this.color1<=0)?-1:1;
        this.t2*=(this.color2>=255||this.color2<=0)?-1:1;
        return "rgb("+this.color1+","+this.color2+","+20+")";
    },
    draw() {
        let ctx = this.ctx;
        ctx.save();
        ctx.fillStyle='rgba(255,255,255,0.2)';
        ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
        ctx.restore();

        //绘制背景
        ctx.save();

        ctx.strokeStyle=this.getColor();
        ctx.lineWidth=10;
        ctx.strokeRect(0,0,this.canvas.width,this.canvas.height);
        ctx.restore();

        if (this.isDisappear) {
//            ctx.save();
//            ctx.restore();
        }
        else {
            //计算速度
            this.ball.vy *= 0.99;
            this.ball.vy += 2;
            let tempMinWdith = 0;
            let tempMaxWdith = this.canvas.width;
            if(this.isConnect) {
                //双人
                if(!this.isLocal && this.ball.x - this.ball.r - 20 <= 0) {
                    this.overScreen()
                } else if(this.isLocal && this.ball.x+this.ball.r+20 >= tempMaxWdith) {
                    this.overScreen()
                }
                else {
                    this.ball.vx*=(this.ball.x+this.ball.r+20>tempMaxWdith||this.ball.x-this.ball.r-20<tempMinWdith)?-1:1;
                }
            }
            else {
                //单人
                this.ball.vx*=(this.ball.x+this.ball.r+20>tempMaxWdith||this.ball.x-this.ball.r-20<tempMinWdith)?-1:1;
            }
            this.ball.vy*=(this.ball.y+this.ball.r+20>this.canvas.height||this.ball.y-this.ball.r-20<0)?-1:1;


            //计算位置
            this.ball.x+=this.ball.vx;
            this.ball.y+=this.ball.vy;
            //画出图形
            this.ball.color="rgb("+138+","+this.color1+","+226+")";
            this.ball.draw(ctx);

        }

    },
    //超出屏幕
    overScreen() {
        console.log('超出')
        this.isDisappear = true;
//        this.isLocal = !this.isLocal;
//        this.comeBakcScreen(this.ball);
        this.sendDataToOther({method:'overScreen', ball: {
            x:this.ball.x,
            y:this.ball.y,
            vx:this.ball.vx,
            vy:this.ball.vy,
            color:this.ball.vy
        }});
    },
    //回归屏幕
    comeBakcScreen(ball) {
        this.isDisappear = false
        if(this.isConnect && this.isLocal) {
            this.ball.x = 350 - 60;
        }
        else if(this.isConnect && !this.isLocal){
            this.ball.x = 60
        }
        else {
            this.ball.x = ball.x
        }

        this.ball.y = ball.y
        this.ball.vx = ball.vx
        this.ball.vy = ball.vy
        this.ball.color = ball.color
        console.log(ball.vx)
    },


//获取可连接的设备
    getDeviceListBtnClick() {
        myPAObj.callAbility(REQUEST_GET_DEVICE).then(res => {
            res = JSON.parse(res);
            console.log("设备ID为" + res.deviceInfo[0].deviceId);
            this.deviceId = res.deviceInfo[0].deviceId
        })
    },
//与单个设备连接
    connectDeviceById() {
        myPAObj.callAbility(REQUEST_CONNECT, this.deviceId).then(res => {
            console.log(res);
            this.isConnect = true;
        })
    },
//给连接好的那台设备发送信息
    sendDataToOther(data) {
        myPAObj.callAbility(REQUEST_SEND_MSG,data).then(res => {
//            console.log(res);

        })
    },
//订阅
    subscribe() {
        let data = {
            posX: '100',
            posY: '200'
        }
        myPAObj.subscribeAbilityEvent(REQUEST_SUBSCRIBE, data, this.subCallBack).then(res => {
            console.log(res);
            res = JSON.parse(res);
            this.isLocal = res.isLocal;
        })
    },
//取消订阅
    unsubscribe: function () {
        myPAObj.unsubscribeAbilityEvent(REQUEST_UNSUBSCRIBE).then(res => {
            console.log(res);
        })
    },
//订阅的回调函数
    subCallBack(res) {
        console.log('调用回调');
        res = JSON.parse(res);
        let data = res.data;
        let msg = data.msg
        msg = JSON.parse(msg);
        if(msg.method) {
            switch (msg.method) {
                case 'onStart' : {
                    this.onStart();
                    this.isConnect = true;
                    this.isLocal = false;
                    break;
                }
                case 'overScreen': {
                    console.log('接收到返回')
                    this.comeBakcScreen(msg.ball)
                }
                default: {
                     break;
                }
            }
        }
    },


////官方生命周期（目前没看到调用
    onStartContinuation() {
        console.log('onStartContinuation');
    },
    onCompleteContinuation(code) {
        console.log('onCompleteContinuation');
    },
    onNewRequest() {
        console.log('onNewRequest');
    }
}
